<!doctype html>
<html class="no-js">

<head>
    <title>商品详情</title>
    <#include "/res/components/meta.html" />
    <#include "/res/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/res/stylesheets/productInfo.css">
</head>

<body>
    <div id="app">
        <div data-am-widget="slider" class="am-slider am-slider-a1 slider1" data-am-slider='{"directionNav":false}'>
            <#if images??>
            <ul class="am-slides">
                <#list images as item>
                    <li>
                        <div class="img-container fillimg">
                            <img src="${item!''}">
                        </div>
                    </li>
                </#list>
            </ul>
            </#if>
        </div>
        <div class="product-container">
            <div class="product-title">
                <span>${(product.name)!''}</span>
            </div>
            <div class="product-desc">
                <span>${(product.desc)!''}</span>
            </div>
            <#if product.isGroup==1>
                <div class="product-tips theme-color">
                    <span>支付开团并邀请好友参加，人数不足自动退款，详见下方团购玩法</span>
                </div>
            </#if>
        </div>
        <!-- <div class="tips">
            <span>点击下方直接参与附近的小伙伴团购</span>
        </div>
        <div class="group-buying-nearby-container">
            <div class="group-buying-info">
                <div class="group-buying-user">
                    <img class="am-img-thumbnail am-circle" src="/res/assets/img/avator1.jpg" />
                    <span>喵了个喵</span>
                </div>
                <div class="group-buying-time">
                    <span>发起时间：2018-07-13 21:02:13</span>
                </div>
            </div>
            <div class="am-g group-buying-price">
                <div class="am-u-sm-7">￥99</div>
                <div class="am-u-sm-5">差9人成团，火速参团</div>
            </div>
        </div> -->
        <#if product.isGroup==1>
            <div class="intro-container">
                <div class="intro-title">
                    <span class="theme-background-color">&nbsp;&nbsp;</span>拼团玩法</div>
                <div class="intro-content">
                    <ul class="am-avg-sm-4">
                        <li>
                            <!-- <div>1</div>
                            <div>选择心仪商品</div> -->
                            <img src="/res/assets/img/digital1.png" class="am-img-responsive" />
                        </li>
                        <li>
                            <img src="/res/assets/img/digital2.png" class="am-img-responsive" />
                        </li>
                        <li>
                            <img src="/res/assets/img/digital3.png" class="am-img-responsive" />
                        </li>
                        <li>
                            <img src="/res/assets/img/digital4.png" class="am-img-responsive" />
                        </li>
                    </ul>
                </div>
            </div>
        </#if>
        <div class="product-detail-container">
            <div class="product-detail-top">
                <div class="product-detail-top-line theme-background-color"></div>
                <div class="product-detail-top-text">图文详情</div>
            </div>
            <div class="product-detail-content">
                <article>
                    ${product.html!''}
                </article>
                <!-- <#include '/res/components/productIntro.html'/> -->
            </div>
        </div>
        <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default bottom-container" id="">
            <div class="am-g">
                <div class="am-navbar-nav am-cf am-u-sm-3">
                    <a href="/tg/">
                        <span class="am-icon-home"></span>
                        <span class="am-navbar-label">首页</span>
                    </a>
                </div>
                <div class="am-u-sm-9 bottom-buy-container">
                    <ul class=" am-cf am-avg-sm-1">
                        <!-- <li class="bottom-buy-li1">
                            <a href="#">
                                <span class="bottom-price-span">￥${(product.price/100.0)!''}</span>
                                <span class="am-navbar-label">单独购买</span>
                            </a>
                        </li> -->
                        <li class="bottom-buy-li2">
                            <#if product.isGroup==1>
                                <a href="javascript:" data-am-modal="{target: '#selectGroup'}">
                                    <#if (groups!?size> 0)>
                                        <span class="bottom-price-span">￥${groups[groups?size-1].price/100.0!}</span>
                                    </#if>
                                    <span class="am-navbar-label">阶梯团 | 去开团</span>
                                </a>
                                <#else>
                                    <a href="javascript:" data-am-modal="{target: '#selectType'}">
                                    <span class="am-navbar-label">加入购物车</span>
                                </a>
                            </#if>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="am-modal-actions" id="selectGroup">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">请选择几人团</li>
                    <#list groups as item>
                        <li>
                            <a href="/tg/order/addOrder?id=${item.id!''}">${item.num!''}人团 - ￥${item.price/100.0!''}</a>
                        </li>
                    </#list>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="selectType">
            <div class="am-modal-actions-group">
                <div class="content">
                    <div class="am-g">
                        <div class="am-u-sm-3">
                            <img src="${product.cover!}" class="am-img-responsive" />
                        </div>
                        <div class="am-u-sm-9">
                            <div class="price" id="selectedPrice">￥${(product.price/100.0)!}</div>
                            <div>${product.name!}</div>
                        </div>
                    </div>
                    <div class="type">
                        <input type="hidden" id="buyType" />
                        <#list productItem as item>
                            <div class="type-item" data-id="${item.id!}" data-price="${(item.price/100.0)!}">${item.itemName!}</div>
                        </#list>
                    </div>
                    <div class="count">
                        <div>购买数量</div>
                        <div class="am-input-group">
                            <span class="am-input-group-btn">
                                <button class="am-btn am-btn-default" type="button" id="minus">-</button>
                            </span>
                            <input type="text" class="am-form-field am-input-sm" id="buyCount" type="number" value="1">
                            <span class="am-input-group-btn">
                                <button class="am-btn am-btn-default" type="button" id="plus">+</button>
                            </span>
                        </div>
                        <div class="am-cf"></div>
                    </div>
                </div>
                <div>
                    <button class="am-btn am-btn-secondary am-btn-block" id="addToCart">确定</button>
                </div>
            </div>
        </div>
    </div>
    <#include "/res/components/scripts.html" />
    <#include "/res/components/wxConfig.html" />
    <#include "/res/components/http.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
    wx.ready(function() {
        var title = '善小姐的拼团'
        var desc = '走过路过不要错过${product.name!""}哟'
        var link = '${host}/product/getProductById?id=${(product.id)!}'
        var imgUrl = '${product.cover!}'
        initWXShareAll(title, desc, link, imgUrl)
    });
    </script>
    <script>
    $(document).ready(function() {
        $(".type-item").click(function() {
            var self = $(this);
            $("#buyType").val(self.attr("data-id"));
            self.parent().children().each(function() {
                $(this).removeClass("selectedType");
            })
            self.addClass("selectedType");
            $("#selectedPrice").text("￥" + self.attr("data-price"));
        })
        $("#minus").click(function() {
            var curr = new Number($("#buyCount").val());
            if (curr < 2) {
                return;
            }
            $("#buyCount").val(curr - 1);
        })
        $("#plus").click(function() {
            var curr = new Number($("#buyCount").val());
            $("#buyCount").val(curr + 1);
        })
        $("#addToCart").click(function() {
            var buyType = $("#buyType").val();
            var buyCount = $("#buyCount").val();
            if (buyType == '') {
                alert("请选择规格");
                return;
            }
            if (buyCount == 0 || buyCount == '0') {
                alert("数量不能为0");
                return;
            }
            // window.location.href = "/tg/shoppingCar/addProductToCar?productId=${product.id!}&productItemId=" + buyType + "&num=" + buyCount;
            var url = "/tg/shoppingCar/addProductToCar";
            var params = {
                productId: "${product.id!}",
                productItemId: buyType,
                num: buyCount
            }
            var success = function(data) {
                var $modal = $('#selectType');
                $modal.modal('close');

                var userMobile = '${user.mobile!}';
                if (userMobile == '') {
                    layer.open({
                        content: '加入购物车成功<br />您尚未注册，是否现在注册？',
                        btn: ['确定', '取消'],
                        yes: function(index) {
                            window.location.href = "/tg/signUp";
                        }
                    });
                } else {
                    message("加入购物车成功");
                }
            }
            var fail = function() {}
            request(url, params, success, fail);
        })
        $("article").find("img").each(function() {
            // $(this).addClass("am-img-responsive");
            $(this).css("max-width", "100%");
        })
    })
    </script>
</body>

</html>